<template>
  <div class="nav-box-wrap" :class="navObj.icon === 'nav_marketing'?'novice-boot-box-wrap': ''" @click.stop="click">
    <!-- <div class="nav-box"> -->
      <router-link :to="link">
        <!-- <el-tooltip class="item" effect="dark" :content="tipContent" placement="right-start"> -->
        <div class="nav-item-wrap" data-v-7moor v-bind:class="[navType]">
            <!-- <div class="nav-item-icon" v-bind:class="[navType]"> -->
              <el-badge is-dot :class="{m7badge: noBadge,'navMenuState': navMenuState}">
                <span class="iconfont" :class="ic"></span>
              </el-badge>
              <span class="nav-icon-title ellipsis" v-show="navMenuState" :title="tipContent">{{tipContent}}</span>
            <!-- </div> -->
            <div v-show="!navMenuState" class="tooltip tooltip-div">{{tipContent}}
            </div>
            <i v-show="!navMenuState" class="tooltip tooltip-i"></i>
        </div>
      <!-- </el-tooltip> -->
    </router-link>
    <div class="nav-masking"></div>
    <div class="height-blank" v-if="link === '/index/km'" data-v-7moor></div>
    <!-- </div> -->
    <div class="novice-circle-group" v-if="!noviceSuccess&&!getNoviceKeyStatus.marketingDiagnosis && navObj.icon === 'nav_marketing'">
      <div class="novice-circle4"></div>
      <div class="novice-circle3"></div>
      <div class="novice-circle2"></div>
      <div class="novice-circle1"></div>
    </div>
    <novice-boot v-if="!noviceSuccess&&!getNoviceKeyStatus.marketingDiagnosis && navObj.icon === 'nav_marketing'"  :NoviceStyle="NoviceStyle" :NoviceArr="NoviceArr" NoviceKey="marketingDiagnosis" @updateGuidanceSuccess="updateGuidanceSuccess"></novice-boot>
  </div>
  </template>
<script>
    import noviceBoot from '../novice-boot/index.vue'
    import m7dicMap from '@utils/m7dicMap.js'
    export default {
      name: 'navItem',
      props: ['navType', 'tipContent', 'noBadge', 'link', 'ic', 'navObj'],
      data () {
        return {
          activeName: '',
          NoviceStyle: 'position:absolute;top:-30px;left:64px;',
          NoviceArr: [{title: this.$t('market.marketing'), text: this.$t('market.noviceNavText')}],
          noviceSuccess: false
        }
      },
      components: {
        noviceBoot
      },
      methods: {
        click () {
          this.activeName = this.navObj.id
          this.$store.commit('CLOSE_ADV_SEARCH')
          let data = {nav: this.navObj, status: true}
          this.$emit('navClick', data)
          this.closeUserInfoDiv()
        },
        updateGuidanceSuccess () {
          this.noviceSuccess = true
        },
        closeUserInfoDiv () {
          let pane = document.getElementById('setUserInfo')
          if (pane) {
            pane.style.display = 'none'
          }
        }
      },
      computed: {
        getNoviceKeyStatus () {
//          let dicMap = this.$store.state.session.dicMap
          let dicMap = m7dicMap.getAll()
          if (dicMap && dicMap.guidance) {
            return dicMap.guidance
          } else {
            return {'marketingDiagnosis': true} // 服务不对，或者是没有这个对象时，默认不显示。marketingDiagnosis为气泡的key
          }
        },
        navMenuState () {
          return this.$store.state.navMenuState || false
        }
      }
    }
</script>
<style lang="stylus" scoped>
  @import '../../../assets/common.styl'
  .nav-box-wrap
    position relative
  .tooltip-i
    position: absolute;
    margin: 0 0 0 4px;
    width: 2px;
    height: 1px;
    border-width: 5px;
    border-style: solid;
    opacity: 0.8;
    border-color: transparent rgb(28, 141, 224) transparent transparent;
    border-image: initial;
    left: 59px;
    z-index: 2000;
    top: 18px;
  .tooltip-div
    position: absolute
    z-index: 50000
    opacity: 0.8
    background-color: rgb(28, 141, 224)
    padding: 9px 10px
    color: $cf-white
    border-radius: 4px
    white-space: nowrap
    left: 75px
    top 5px
  .tooltip
    visibility hidden
  .nav-item-wrap:hover
    background-color #001023
    .tooltip
       visibility visible
  .arrow:after
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      content: " ";
      border-width: 5px;
  .height-blank
    content ''
    margin 1.28em 0
    border-bottom 1px solid #38445e
    border-top 1px solid #0f131a
    /*&:after*/
      /*content: '';*/
      /*width: 100%;*/
      /*height: 1px;*/
      /*border-bottom: 1px solid #343e42;*/
      /*display: block;*/
  .iconfont
    font-size 1.8em
    color #99a3ae
  .navMenuState
    height 20px
  .navMenuState .iconfont
    font-size 18px
  .nav-item-wrap
    /*width 114px*/
    /*height 2.7em*/
    /*height 42px*/
    /*padding-top 1em*/
    padding 15px 0 15px 17px
    position relative
    /*display flex
    justify-content center
    align-items center 
    box-sizing border-box */
    text-align left
    /*padding-left 18px*/
    color #fff
    .nav-icon-title
      width 60px
      position absolute
      top 14px
      left 46px
      color #fff
      font-size 14px
    .iconfont
      color #fff
  .router-link-active
    .nav-item-wrap
      background #459AE9
      .iconfont
        color #fff
      .nav-icon-title
        color #fff
  .router-link-active+.nav-masking
    position absolute
    left 0
    top 0
    width 100%
    height 100%
</style>
